<template>
	<view class="login-page">
		<!-- Logo 区域 -->
		<view class="logo-section">
			<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			<text class="app-name">校园平台</text>
			<text class="app-slogan">连接你我，共建美好校园</text>
		</view>

		<!-- 登录表单 -->
		<view class="login-form">
			<up-form ref="formRef" :model="formData" :rules="rules">
				<up-form-item prop="uname">
					<up-input v-model="formData.uname" placeholder="请输入用户名" prefixIcon="account" border="surround"
						:clearable="true"></up-input>
				</up-form-item>

				<up-form-item prop="password">
					<up-input v-model="formData.password" type="password" placeholder="请输入密码" prefixIcon="lock"
						border="surround" :clearable="true"></up-input>
				</up-form-item>
			</up-form>

			<!-- 记住密码 -->
			<view class="remember-section">
				<up-checkbox v-model:checked="rememberPassword" usedAlone shape="circle" activeColor="#36d399">记住密码</up-checkbox>
				<!-- <text class="forgot-password" @click="handleForgotPassword">忘记密码？</text> -->
			</view>

			<!-- 登录按钮 -->
			<up-button type="primary" :loading="loading" @click="handleLogin" class="login-btn"
				color="#36d399">登录</up-button>

			<!-- 注册链接 -->
			<view class="register-section">
				<text class="register-hint">还没有账号？</text>
				<text class="register-link" @click="handleGoRegister">立即注册</text>
			</view>
		</view>

		<!-- 快速登录（可选） -->
		<!-- <view class="quick-login">
			<view class="divider">
				<text class="divider-text">其他登录方式</text>
			</view>
			<view class="quick-login-btns">
				<view class="quick-login-item">
					<up-icon name="weixin-fill" size="40" color="#09BB07"></up-icon>
					<text class="quick-login-text">微信</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		login
	} from '../../server/api/auth.js';
	import showToast from '../../utils/showToast.js';

	// 表单数据
	const formData = reactive({
		uname: '',
		password: ''
	});

	// 表单验证规则
	const rules = {
		uname: [{
			required: true,
			message: '请输入用户名',
			trigger: ['blur', 'change']
		}],
		password: [{
				required: true,
				message: '请输入密码',
				trigger: ['blur', 'change']
			},
			{
				min: 6,
				message: '密码长度不能少于6位',
				trigger: ['blur', 'change']
			}
		]
	};

	// 状态
	const formRef = ref(null);
	const loading = ref(false);
	const rememberPassword = ref(false);

	/**
	 * 处理登录
	 */
	const handleLogin = async () => {
		// 表单验证
		try {
			await formRef.value.validate();
		} catch (errors) {
			console.log('表单验证失败:', errors);
			return;
		}

		loading.value = true;

		try {
			// 调用真实登录接口
			const res = await login({
				uname: formData.uname,
				password: formData.password
			});

			if (res.code === 200) {
				// 保存 token 和用户信息
				uni.setStorageSync('token', res.data.token);
				
				// 处理后端字段：nickName -> nickname（统一为小写）
				const userInfo = {
					...res.data.userInfo,
					nickname: res.data.userInfo.nickName || res.data.userInfo.nickname,
					introduction: res.data.userInfo.Introduction || res.data.userInfo.introduction
				};
				uni.setStorageSync('userInfo', userInfo);

				// 记住密码
				if (rememberPassword.value) {
					uni.setStorageSync('savedAccount', {
						uname: formData.uname,
						password: formData.password
					});
				} else {
					uni.removeStorageSync('savedAccount');
				}

				showToast('登录成功', 'success');

				// 延迟跳转，让用户看到成功提示
				setTimeout(() => {
					// 跳转到首页并关闭登录页
					uni.reLaunch({
						url: '/pages/home/home'
					});
				}, 1000);
			} else {
				showToast(res.message || '登录失败', 'error');
			}
		} catch (error) {
			console.error('登录异常:', error);
			showToast(error.message || '网络错误，请稍后重试', 'error');
		} finally {
			loading.value = false;
		}
	};

	/**
	 * 跳转到注册页面
	 */
	const handleGoRegister = () => {
		uni.navigateTo({
			url: '/pages/register/register'
		});
	};

	/**
	 * 忘记密码
	 */
	const handleForgotPassword = () => {
		showToast('该功能暂未开放', 'none');
	};

	/**
	 * 页面加载时，检查是否有保存的账号
	 */
	const checkSavedAccount = () => {
		const savedAccount = uni.getStorageSync('savedAccount');
		if (savedAccount) {
			formData.uname = savedAccount.uname;
			formData.password = savedAccount.password;
			rememberPassword.value = true;
		}
	};

	// 页面加载时调用
	checkSavedAccount();
</script>

<style lang="scss" scoped>
	.login-page {
		min-height: 100vh;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 80rpx 60rpx;
		display: flex;
		flex-direction: column;
	}

	// Logo 区域
	.logo-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 100rpx;

		.logo {
			width: 160rpx;
			height: 160rpx;
			border-radius: 30rpx;
			margin-bottom: 30rpx;
			background-color: #ffffff;
			box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);
		}

		.app-name {
			font-size: 48rpx;
			font-weight: bold;
			color: #ffffff;
			margin-bottom: 16rpx;
		}

		.app-slogan {
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.8);
		}
	}

	// 登录表单
	.login-form {
		background-color: #ffffff;
		border-radius: 30rpx;
		padding: 60rpx 50rpx;
		box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.1);

		/* #ifdef H5 */
		:deep(.u-form-item) {
			margin-bottom: 40rpx;
		}

		:deep(.u-input) {
			height: 90rpx;
		}
		/* #endif */
		
		/* #ifndef H5 */
		// 小程序端使用全局样式覆盖
		.u-form-item {
			margin-bottom: 40rpx !important;
		}

		.u-input {
			height: 90rpx !important;
		}
		/* #endif */
	}

	// 记住密码区域
	.remember-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;

		.forgot-password {
			font-size: 26rpx;
			color: #36d399;
		}
	}

	// 登录按钮
	.login-btn {
		width: 100%;
		height: 90rpx;
		border-radius: 45rpx;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	// 注册区域
	.register-section {
		text-align: center;

		.register-hint {
			font-size: 26rpx;
			color: #999999;
			margin-right: 10rpx;
		}

		.register-link {
			font-size: 26rpx;
			color: #36d399;
			font-weight: bold;
		}
	}

	// 快速登录
	.quick-login {
		margin-top: 80rpx;

		.divider {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			&::before,
			&::after {
				content: '';
				flex: 1;
				height: 1rpx;
				background-color: rgba(255, 255, 255, 0.3);
			}

			.divider-text {
				padding: 0 30rpx;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.7);
			}
		}

		.quick-login-btns {
			display: flex;
			justify-content: center;
			gap: 60rpx;

			.quick-login-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 16rpx;

				.quick-login-text {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.8);
				}
			}
		}
	}
</style>

